<%@ page language="java" contentType="text/html;charset=UTF-8" %><%@ include file="../../inc/global.jsp" 
%><compress:html enabled="true" removeComments="false" compressJavaScript="true" yuiJsDisableOptimizations="true">
<!doctype html>
<html>
<head>
<title><fmt:message key="jsp.a.category.list"/></title>
<%@include file="../head.jsp" %>
<style type="text/css">
#properties th dd span, #properties td dd span {color:blue;font-size:12px;cursor:pointer;}
#properties em{color:333; display:block; width:50px; height:20px; background:#ddd; border:1px solid #fff; text-align:center;}
#properties input[type=text] {width:48px; height:18px; line-height:18px;}
.propsForm {margin:7px;}
.propsForm th {width:80px;}
.propsForm th, .propsForm td {height:30px;}
table th input[type=text]{width:138px; height:22px; line-height:22px; padding:0px 3px;}
table ul li {height:22px; line-height:22px; display:block; margin:3px 11px; width:130px; float:left; cursor:pointer; color:#000099;}
table ul li input[type=text]{width:130px; padding:0px 3px; }
dl dd em {color:blue; cursor:pointer;}
.sidebar ul {margin:0px; padding:0px 0px 0px 2px;}
.sidebar ul li {
	display:inline-block;
	border:1px #fff solid; 
	text-align:center;
	margin:0px; padding:0px;
	width:22%;
}
.sidebar ul li a {display:block; line-height:32px;}
.sidebar ul li.slt a, .sidebar ul li.slt a:link, .sidebar ul li.slt a:visited{color:#fff; background:#ff6600;}
.sidebar ul li a:hover{background:#ff8800;color:#fff;}
.sidebar h3{margin:3px 0px 1px 2px;}
</style>
<script type="text/javascript">
function Tools() {
	var _this = this;
	this.init = function() {
		$(".sidebar ul li").bind('click', function(){
			var url = "/a/ajax/category/modify/list";
			var letter = $(this).attr('id');
			if(letter != undefined) {
				url += '?flt=' + letter;
			}
			$.get(url, function(data) {
				$("#modifyList").html(data);
				_this.bindEvent();
			});
			$('.sidebar ul li').each(function(){
				$(this).removeClass('slt');
			});
			$(this).addClass('slt');
		});
		_this.bindEvent();
	};
	this.bindEvent = function() {
		$(".list input[type=button]").bind('click', function(){
			var name = $(this).attr('name');
			var postUrl = '/a/ajax/category/save';
			var nameval = $('#newCategory').val();
			$(this).attr('disabled', 'true');
			var _btn = this;
			$.post(postUrl, 
					{name : nameval},
					function(data) {
						var json = $.parseJSON(data);
						if(json.succeed) {
							 location.reload();
						} else {
							alert(json.msg);
							$(_btn).removeAttr('disabled');
						}
					});
		});
		$(".list li").bind('click', function() {
			var span = $(this).find('span');
			var name = span.html();
			var id = $(this).find('input[type=hidden]').val();
			if(!${CATEGORY_MODIFY}) {
				alert('权限不足，您无权修改内容！');
				return;
			}
			if($(span).find('input').length > 0) {
				//return;
			} else {
				$(span).html('<input type="text" id="'+id+'" name="'+id+'" value="'+name+'" />');
				var input = $(this).find('input[type=text]');
				var t = $(input).val(); 
				$(input).val("").focus().val(t);
			}
			var saveUrl = '/a/brand-category/category/save';
			$(input).bind('keydown', function(event){
				if (event.keyCode == 13) {
					var newName = $(this).val();
					$.post(saveUrl, 
							{id : id
								, name : newName
							},
							function(data) {
								span.html(newName);
							});
				}
			}).bind('blur', function(){
				var newName = $(this).val();
				$.post(saveUrl, 
						{id : id
							, name : newName
						},
						function(data) {
							span.html(newName);
						});
			});
		});
		function save(input) {
			if(!${CATEGORY_MODIFY}) {
				alert('权限不足，您无权修改内容！');
				return;
			} 
			var newName = $(this).val();
			$.post('/a/brand-category/category/save', 
					{id : id
						, name : newName
					},
					function(data) {
						span.html(newName);
					});
		};
	};
}
var tools = new Tools();
$(function() {
	tools.init();
});
</script>
</head>
<body>
<div class="wrapper">
<%@include file="../header.jsp" %>
<div class="body">
<div class="list">
<table id="brands">
<thead>
<tr>
<th>
<c:if test="${CATEGORY_MODIFY}">
<span class="right">
新增<input type="text" id="newCategory" name="newCategory" value="" />
<input type="button" id="newCategoryBtn" name="newCategoryBtn" value="<fmt:message key="message.save.sure" />"/>
</span>
</c:if>
<fmt:message key="message.category.name" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="modifyList">
<ul>
<c:forEach var="item" items="${categoryList}">
<li>
<span>${item.name}</span>
<input type="hidden" name="category" id="category_${item.id}" value="${item.id}"/>
</li>
</c:forEach>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<!--  -->
<div class="sidebar">
<h3>按字母筛选</h3>
<ul class="letter">
<li class="slt"><a href="###"><fmt:message key="message.all" /></a></li>
<c:forEach var="item" items="${alphabet}">
<li id="${item}"><a href="###">${item}</a></li>
</c:forEach>
</ul>
</div>
</div>
</div>
</body>
</html>
</compress:html>